<template>
  <div class="t-view-wrapper tv-bor" :style="{ width: wrapWidth + 'px' }">
    <div
      class="t-view-date tv-bor"
      v-for="(d, index) in headerData"
      :key="index"
    >
      {{ d }}
    </div>
    <div class="t-view-body">
      <div class="t-view-execution-price">
        <div
          class="t-view-price tv-bor"
          v-for="price in executionPrice"
          :key="price"
        >
          <slot name="price" :price="price">
            {{ price }}
          </slot>
        </div>
      </div>
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "TView",
  props: ["display", "closingDate", "executionPrice"],
  provide() {
    return {
      parentVM: this,
    };
  },
  computed: {
    headerData() {
      return this.closingDate.concat("执行价").concat(this.closingDate);
    },
    wrapWidth() {
      return this.closingDate.length * 2 * 80 + 80;
    },
  },
};
</script>
<style>
.tv-bor {
  box-sizing: border-box;
    border-right: 1px solid #333;
  border-bottom:   1px solid #890;
}
.t-view-wrapper {
  box-sizing: content-box;
  border: 1px solid #789;
}
.t-view-date {
  display: inline-block;
  box-sizing: border-box;
  width: 80px;
}
.t-view-body {
  box-sizing: border-box;
}
.t-view-body:after {
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
}
.t-view-execution-price {
  display: inline-block;
  width: 80px;
  color: brown;
}
.t-view-price {
  background-color: antiquewhite;
}
.t-view-list {
  box-sizing: border-box;
}
.t-view-list-call {
  float: left;
  background-color: #a3a3a3;
}
.t-view-list-pull {
  float: right;
  background-color: #fe9abc;
}
.t-view-cell {
  box-sizing: border-box;
  width: 80px;
  display: inline-block;
}
.tv-repeat {
  background-color: #f00;
}
</style>